<template>
  <div class="clcy">
    <Card noTitle>
      <div slot="cRight">
        <el-form inline size="small">
          <el-form-item label="商品搜索">
            <el-input></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="dialogVisible = true"
            >
              省审批设置
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="dialogVisibleA = true"
            >
              业务受理
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <Table :tableData="tableData" @btnClick="handleClick"></Table>
      <Pagination :total="tableData.row.length"></Pagination>
    </Card>

    <el-dialog
      close="dialog"
      title="省审批设置"
      :visible.sync="dialogVisible"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <Dd />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="
            dialogVisible = false
            $message({
              message: '设置成功',
              type: 'success'
            })
          "
        >
          确 认
        </el-button>
        <el-button type="primary" @click="dialogVisible = false">
          取 消
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      close="dialog"
      title="业务受理"
      :visible.sync="dialogVisibleA"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <DdA @hanlePer="selectPer = true" />
      </el-scrollbar>
      <el-dialog
        append-to-body
        close="dialog"
        title="选取客户"
        :visible.sync="selectPer"
        width="60%"
        top="10vh"
      >
        <el-scrollbar>
          <Person @hanlePer="selectPer = !selectPer" />
        </el-scrollbar>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="
            dialogVisibleA = false
            addTableData()
          "
        >
          确 认
        </el-button>
        <el-button type="primary" @click="dialogVisibleA = false">
          取 消
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      close="dialog"
      title="一点跟踪"
      :visible.sync="dialogVisibleB"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <Table :tableData="tableDataA"></Table>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleB = false">
          返 回
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
import Dd from './components/Dd'
import DdA from './components/DdA'
import Person from './components/Person'
export default {
  components: {
    Card,
    Table,
    Pagination,
    Dd,
    DdA,
    Person
  },

  data() {
    return {
      dialogVisible: false,
      dialogVisibleA: false,
      dialogVisibleB: false,
      selectPer: false,
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '订单号'
          },
          {
            prop: 'colB',
            label: '业务名称'
          },
          {
            prop: 'colC',
            label: '状态'
          },
          {
            prop: 'colD',
            label: '操作人员'
          },
          {
            prop: 'colF',
            label: '操作',
            type: 'Button',
            btnList: [{ label: '一点跟踪' }]
          }
        ],
        row: [
          {
            colA: '3857',
            colB: '云视讯专线一',
            colC: '开通中',
            colD: '李思强',
            colE: '2020-11-08'
          },
          {
            colA: '3858',
            colB: '云视讯专线一',
            colC: '开通中',
            colD: '王丽',
            colE: '2020-11-12'
          },
          {
            colA: '3859',
            colB: '云视讯专线一',
            colC: '关闭',
            colD: '赵健',
            colE: '2020-11-13'
          }
        ]
      },
      tableDataA: {
        col: [
          {
            prop: 'colA',
            label: '子订单号'
          },
          {
            prop: 'colB',
            label: '业务名称'
          },
          {
            prop: 'colC',
            label: '状态'
          }
        ],
        row: [
          {
            colA: '3857100001',
            colB: '虚拟号云视讯',
            colC: '开通中'
          },
          {
            colA: '3858100002',
            colB: '虚拟号云视讯',
            colC: '开通中'
          },
          {
            colA: '3859100003',
            colB: '省内互联网专线',
            colC: '等待'
          },
          {
            colA: '3859100004',
            colB: '省内互联网专线',
            colC: '等待'
          }
        ]
      }
    }
  },

  methods: {
    handleClick(index) {
      if (index === 0) this.dialogVisibleB = true
    },
    addTableData() {
      this.tableData.row.push({
        colA: '3860',
        colB: '云视讯专线一',
        colC: '开通中',
        colD: '钱集',
        colE: '2020-11-12'
      })
      this.$message({
        message: '提单成功，订单号为 3860',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0 !important;
}
/deep/.el-dialog__body {
  height: 62vh;
}
</style>
